<template>
	<view class="page">
		<view class="my_padding">
			<view class="my_body">
				<view class="title-top">
					<view class="person-info">
						<view class="info_contain">
							<div style="display: flex;" >
								<view class="uni-media-list-logo phto" @click="navToUrl('/pages/user/avatar')">
									<image :src="avatar" :lazy-load="true" style="border-radius: 35px; border:1px solid #CCC; background: #FFF;" />
								</view>
								<view class="header-msg" @click="navToUrl('/pages/user/vip')">
									<view class="header-msg-top" style="display: flex;flex-direction:column">
	<!--									<image class="uni-media-list-auth" :src="authIconSrc" />-->
										<view style="display: flex;align-items: center;gap: 20rpx;margin-bottom: 10rpx">
											<view style="font-size: 42rpx;font-weight: bold;">{{userinfo.level_name}}</view>
											<image src="@/static/images/ui-11/3.png" style="width: 140rpx;height: 40rpx"></image>
										</view>
										<view class="user-name">{{ filterPhone(userinfo.username) }}</view>
									</view>
	<!--								<view v-if="progressPercent < 100">-->
	<!--									<progress :percent="progressPercent" stroke-width="10" />-->
	<!--								</view>-->
	<!--								<view v-else style="color: aqua;">-->
	<!--									<text>可升级</text>-->
	<!--								</view>									-->
								</view>
							</div>
							<view style="margin-top: 20rpx">
								<image style="width: 40rpx;height: 40rpx;margin-right: 40rpx;" src="@/static/images/ui-11/1.png" @click="navToUrl('/pages/msg/index')"></image>
								<image style="width: 35rpx;height: 40rpx;margin-right: 5px;" src="@/static/images/ui-11/2.png" @click="navToUrl('/pages/user/userinfo')"></image>
							</view>
						</view>
						<view class="info-box" style="padding: 40rpx 50rpx 20rpx 50rpx">
							<view style="display: flex;justify-content: space-between;align-items: center">
								<view style="font-size: 42rpx;color: #fff;font-weight: 600">{{ filterPhone(userinfo.username) }}</view>
								<view style="padding: 10rpx 20rpx;color: #4188ff;border-radius: 30rpx;background: #fff;font-weight: 600">{{userinfo.level_name}}</view>
							</view>
							<view style="display: flex;margin-top: 40rpx">
								<view class="a_item" @click="navToUrl('/pages/wallet/score')">积分: {{this.userinfo.jifen}}</view>
								<view class="a_item" @click="navToUrl('/pages/user/coupon')">卡券:{{this.userinfo.coupon}}</view>
								<view class="a_item" @click="navToUrl('/pages/games/lottery')">抽奖: {{this.userinfo.point}}</view>
							</view>
						</view>
					</view>
					
				</view>

					<view class="my_wallet" >
						<view class="tab-bar">
							<view class="wallet_top">
								<view class="my_wal_tit">我的钱包</view>
							</view>
							<view style="display: flex;text-align: center">
								<view class="grid-item-box" @click="myBalance">
									<view class="price">￥{{ (parseFloat(userinfo.money) + parseFloat(userinfo.balance)).toFixed(2) }}</view>
									<text class="text">我的余额</text>
								</view>
								<view class="grid-item-box" @click="myOrder">
									<view class="price">￥{{ userinfo.wait_money }}</view>
									<text class="text">签约金额</text>
								</view>
								<view class="grid-item-box" @click="myOrder">
									<view class="price">￥{{ userinfo.longContractMoney }}</view>
									<text class="text">长约金额</text>
								</view>
								<view class="grid-item-box">
									<view class="price">￥{{ userinfo.trial_money }}</view>
									<text class="text">体验金</text>
								</view>
							</view>
							
							<view style="display: flex;align-items: center;justify-content: center;gap: 40rpx;margin-top: 40rpx">
								<view v-for="(item, index) in activeList" :index="index" :key="index">
									<view class="grid-item-box" @click="navToUrl(item.url)">
										<!-- <img v-if="item.img" :src='item.img' alt="" srcset=""/> -->
										<view v-if="item.img" style="position: relative;left: 10rpx" :style="'background-image: url('+item.img+');background-repeat: no-repeat;width: 100rpx;height: 100rpx;background-size:100% 100%;'"></view>
										<text class="btn">{{ item.name }}</text>
									</view>
								</view>
							</view>
							
							<view class="my_group" @click="navToUrl('/pages/user/group')">
								<image  src="@/static/images/ui-11/7.png"></image>
								<view style="width: 220rpx;position: relative;z-index: 2;margin-left:40rpx">
									<view class="title">
										<view class="title-text">我的小组</view>
										<view class="btn">
											<u-icon
												size="12"
												color="#fff"
												name="arrow-right"
											></u-icon>
										</view>
									</view>
									<view class="info-text">2项更新</view>
									<view class="btn2">查看更多</view>
								</view>
							</view>
							
							<view style="padding-bottom: 10px; height: 48vw; margin-top: 40rpx">
								<uni-grid :column="3" :highlight="true" :showBorder='false' @change="menuChange">
									<uni-grid-item v-for="(item, index) in menuList" :index="index" :key="index" style="height: 80px;">
										<view class="grid-item-box" style="margin-bottom: ;padding-bottom: 0;">
											<view class="item_image">
												<image :src="item.img"></image>
											</view>
											<text class="text" style="color: #353535;margin-top: 20rpx">{{ item.name }}</text>
										</view>
									</uni-grid-item>
								</uni-grid>
							</view>
							<view style="height: 100rpx;"></view>
						</view>
				</view>

				



			</view>
		</view>
		<tabBar :currentPage="currentPage"></tabBar>
	</view>
	
</template>

<script>
	import tabBar from '@/components/tabBar/tabBar.vue'
	export default {
		components: {
			tabBar
		},
		data() {
			return {
				user_bg: '',
				avatar: '/static/icon_avatar.png',
				userinfo: [],
				list: [],
				currentPage: '/pages/user/person',
				ifOnShow: false,
				unit: '',
				usercoin: 0,
				progressPercent: 0, // 进度条的百分比
				activeList:[{
					name: '每日一签',
					img: '/static/images/ui-11/4.png',
					url: '/pages/tasks/index'
				}, {
					name: '积分商城',
					img: '/static/images/ui-11/5.png',
					url: '/pages/goods/index'
				}, {
					name: '幸运转盘',
					img: '/static/images/ui-11/6.png',
					url: '/pages/games/lottery'
				}, {
					name: '个人成就',
					img: '/static/images/ui-11/5.png',
					url: '/pages/user/achievement'
				}],
				menuList:[{
					name: '在线咨询',
					img: '/static/images/ui-11/icon1.png',
					url: '/pages/help/kefuzx'
				}, {
					name: '实名认证',
					img: '/static/images/ui-11/icon2.png',
					url: '/pages/user/certification'
				}, {
					name: '收货地址',
					img: '/static/images/ui-11/icon3.png',
					url: '/pages/address/index'
				}, {
					name: '账号安全',
					img: '/static/images/ui-11/icon4.png',
					url: '/pages/user/userinfo'
				}, {
					name: '新手指南',
					img: '/static/images/ui-11/icon5.png',
					url: '/pages/user/guide'
				}, {
					name: '关于我们',
					img: '/static/images/ui-11/icon6.png',
					url: '/pages/help/jieshao'
				}],
			};
		},
		onHide() {
			this.ifOnShow = true
		},
		onShow() {
			if (this.ifOnShow) {
				this.getData();
			}
			let pages = getCurrentPages();
			let currPage = pages[pages.length-1];
			if (currPage.$vm.bank_id){
				this.bank_id = currPage.$vm.bank_id;
				// this.loadData();
			}
		},
		onPullDownRefresh() {
			this.page = 1,
			this.lastPage = 0,
			this.list = [],
			this.loadMoreText = "加载更多",
			this.showLoadMore = false;
			
			setTimeout(() => {
				this.getData();
			}, 300);
		},			
		onLoad: function(option) {
			this.helper.checkLogin();
			this.loadImg();
			this.getData();

		},
		computed: {
			authIconSrc() {
			  return this.userinfo.auth === 1 ? '/static/icon_auth.png' : '/static/icon_unauth.png';
			}
		  },		
		methods: {
			tabBarChange(val){
				this.navToUrl(this.testList2[val.detail.index].url)
			},
			tabBarChange1(val){
				this.navToUrl(this.testList1[val.detail.index].url)
			},
			myBalance(){
				this.navToUrl("/pages/wallet/index")
			},
			walletChange(){
				this.navToUrl("/pages/wallet/index")
			},
			myOrder(){
				uni.switchTab({
					url: "/pages/invest/orders"
				})
			},
	
			funcChange(index){
				console.log(index)
				if(index == 6){		//退出登录
					this.dologout()
				} else {
					this.navToUrl(this.funcList[index].url)
				}
			},
			menuChange(val){
				this.navToUrl(this.menuList[val.detail.index].url)
			},
			activeChange(val){
				let index = val.detail.index
				if(index == 0){
					this.navToUrl('/pages/tasks/index')
				// } else if(index == 1){
				// 	uni.navToUrl({
				// 		url: '/pages/wallet/redbag'
				// 	});
				} else {
					this.navToUrl(this.activeList[val.detail.index].url)
				}
			},
			tabBarFooterChange(val){
				if(this.list[val.detail.index].url == 'logout'){
					this.navToPage(this.list[val.detail.index])
				}else if(this.list[val.detail.index].title == '积分任务'){
					this.navToUrl('/pages/wallet/score')
				}
				else{
					this.navToUrl(this.list[val.detail.index].url)
				}
				
			},
			filterPhone(phone) {
				if(phone.length === 11) {
					return  '**'+ phone.substr(2, 7) + '**';
				} else {
					return phone;
				}
			},
			loadImg: function() {
				var range = Math.round(Math.random() * (99999 - 11111)) + 11111;
				// this.user_bg = this.weburl+'/storage/upload/user_bg.png?k='+range;
				// this.avatar = this.weburl + '/storage/upload/icon_avatar.png?k=' + range;
				this.avatar = '/static/default.png'
			},

			//user数据
			getData: function() {
				//获取基础参数
				// uni.showLoading({
				// 	title: "数据加载中",
				// 	mask: true
				// })
				var info = uni.getStorageSync("userinfo");
				if (info.token) {
					let timestamp = this.helper.now();
					let sign = this.helper.setSign(['username=' + info.username, 'token=' + info.token, 'timestamp=' +
						timestamp
					]);
					this.helper.req({
						api: "getUserInfo",
						timestamp: timestamp,
						data: {
							username: info.username,
							token: info.token
						},
						header: {
							sign: sign
						},
						method: 'GET',
					}).then(res => {
						 //console.log('userInfo参数:', this.userinfo)
						this.userinfo = res.data.data.userinfo;
						this.progressPercent = this.userinfo.progressPercent;
						if (this.userinfo.avatar) {
							this.avatar = this.weburl + this.userinfo.avatar;
						}
						this.testList1 = [
								{
									name: '收藏',
									url: '/pages/goods/index',
									number: 0
								},{
									name: '粉丝',
									url: '/pages/user/team',
									number: this.userinfo.tjrs
								},{
									name: '连续打卡',
									url: '/pages/games/qiandao',
									number: this.userinfo.qiandao_num
								}
						]
						setTimeout(() => {
							uni.stopPullDownRefresh();
							uni.hideLoading();
							
						}, 300);
					})
				} else {
					uni.hideLoading();
				}
			},

			moreRecommend:function(){
				var info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['token=' + info.token, 'timestamp=' + timestamp]);
				this.helper.req({
					api: "getUserInfo",
					timestamp: timestamp,
					data: {
						token: info.token
					},
					header: {
						sign: sign
					},
					method: 'GET',
				}).then(res => {
					// console.log(res);
					this.recommendList = res.data.data.list.data;
					uni.stopPullDownRefresh();
					uni.hideLoading();
				});
			},			
			dorefresh: function() {
				this.getData();
			},
			dologout:function(e){
				uni.showModal({
					title: "提示",
					content: "确认退出？",
					showCancel: true,
					confirmText: "确定",
					success:function(res){
						if(res.confirm){
							uni.clearStorageSync('userinfo');
							uni.reLaunch({
								url:"../login/login"
							})
						}
					}
				})
			},
			navToPage: function(e) {
				if (e.url == 'logout') {
					uni.showModal({
						title: "提示",
						content: "确认退出？",
						showCancel: true,
						confirmText: "确定",
						success: function(res) {
							if (res.confirm) {
								uni.removeStorageSync('userinfo');
								uni.reLaunch({
									url: "../login/login"
								})
							}
						}
					})
				} else {
					return uni.navigateTo({
						url: e.url
					});
				}
			},
			navToUrl: function(url) {
				return uni.navigateTo({
					url: url
				});
			},
			imageError: function(e) {
				this.avatar = '/static/icon_avatar.png';
			},
			closeSign:function(){
				this.is_show_qiandao = false
			}
		},
	};
</script>


<!-- index -->
<style lang="scss" scoped>
	.tab-bar-footer {
		border-radius: 3.2vw;
		margin: 3.33333vw auto 0;
		margin-bottom: 60px;
		padding: 16px 0;
		width: 96.8vw;
		box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
	}
	.my_wallet {
		position: relative;
		background: #6c9efd;
		.tab-bar {
			background: linear-gradient(180deg, #fff 28%  , #c2d8ff 40%, #ddeafd 60%);
			border-radius: 20rpx 20rpx 0 0;
			color: #000;
			padding: 40rpx 30rpx 20rpx 30rpx;
		}
	}

	.assetData {
		width: 100%;
		margin-top: 16px;
		border-radius: 15px;
		.uni-grid-item{
			height: 56px !important;
		}
	}

	.grid-item-box span {
		display: block;
		text-align: center;
	}
	
	.grid-item-box .number{
		color:#fe8f27;
		font-size: 16px;
		font-weight: bold;
	}
	.grid-item-box .price{
		color: #5291fd;
		font-size: 16px;
		font-weight: bold;
	}
	.grid-item-box .btn{
		margin-top: 10rpx;
		font-size: 14px;
		padding: 8rpx 12rpx;
		color: #4f8efd;
		background: url("@/static/images/ui-11/btn1.png");
		background-size: 100% 100%;
		backdrop-filter: blur(30px);
		border: 1px solid #fff;
		border-radius: 30rpx;
	}
	
	.item_image{
		width: 80rpx;
		height: 80rpx;
		text-align: center;
		position: relative;
		
		.item_bg{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background-color: #38a7b4;
			opacity: 0.8;
			border-radius: 20px;
		}
		
		image{
			width: 80rpx;
			height: 80rpx;
			//margin: 14px 12px;
		}
	}

	.iconfonts {
		position: absolute;
		right: 160rpx;
		bottom: 0px;
		font-size: 16px;
	}

	.header-msg {
		padding-left: 10px;
	}

	.phto {
		width: 106upx;
		height: 106upx;
		margin-left: 30 upx;
		margin-right: 30 upx;
	}

	.list {
		margin-top: 10upx;
	}

	.qrcode {
		width: 50 upx;
		height: 50 upx;
		margin-right: -20 upx;
	}

	.my_padding {
		/* padding: 50px 15px 16px 15px; */
		/* padding: 12px; */
		/* display: flex; */
		
		// background-image: url('@/static/images/person/center-bg.png');
		// background-size: 100% 100%;
		// background-repeat: no-repeat;
		min-height: 210vw;
		background-color: #e0ecfd;
		// background-size: cover;
	}
	
	.cover{
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: #000;
		opacity: 0.5;
		z-index: 9;
	}
	
	.qian_dao{
		width: 80vw;
		height: 50vw;
		position: fixed;
		top: 60vw;
		left: 10vw;
		background-color: #FFF;
		border-radius: 10px;
		z-index: 99;
		.qd_jiangli{
			width: 26px;
			height: 26px;
			position: absolute;
			top: 4vw;
			left: 24vw;
		}
		.qd_tit{
			width: 20vw;
			line-height: 30px;
			font-size: 20px;
			color:#333;
			font-weight: bold;
			text-align: center;
			position: absolute;
			top: 4vw;
			left: 30vw;
		}
		.qd_main{
			line-height: 30px;
			font-size: 16px;
			color:#444;
			width: 100%;
			text-align: center;
			position: absolute;
			top: 20vw;
			left: 0;
		}
		.confirm{
			line-height: 40px;
			font-size: 20px;
			color: #4079ff;
			width: 100%;
			text-align: center;
			position: absolute;
			bottom: 4vw;
			left: 0;
		}
	}

	.uni-media-list-logo {
		padding: 2px;
		border-radius: 10px;
		height: 70px !important;
		width: 70px !important;
		margin-right: 0upx !important;
		margin-left: 0upx !important;
	}
	.uni-media-list-auth {
		padding: 2px;
		border-radius: 10px;
		height: 26px !important;
		width: 26px !important;
		margin:2px;
		margin-right: 0upx !important;
		margin-left: 0upx !important;
	}
	/* 	.my_padding:after {
		font-family: uniicons;
		content: '\e583';
		position: absolute;
		right: 15px;
		top: 15%;
		font-size: 24px;
		color: #bbb;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	} */
	
	.info_bg{
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		border-radius:10px;
	}
	
	.info_contain{
		display: flex;
		justify-content: space-between;
		//top: 8vw;
	}

	.title-top {
		padding: 46rpx 15px 0;
		background: linear-gradient(180deg, #23c9ea, #6c9efd 50%);
		.person-info{
			height: 50vw;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
		
	}
	.a_item{
		flex: 1;
		text-align: center;
		font-size: 14px;
		color:#fff;
	}
	.header-erw {
		position: absolute;
		right: 45px;
		top: 13%;
		font-size: 24px;
		width: 24px;
		height: 24px;
		z-index: 9999;
	}

	.uni-list {
		margin-bottom: 30 upx;
	}

	.uni-list-cell-navigate.uni-navigate-right:after {
		font-size: 20px !important;
	}

	.header-msg-bottom {
		color: #fff;
		font-size: 5.2vw;
		font-weight: 600;
		line-height: 5.2vw;
	}
	.info-box {
		background: linear-gradient(#6438c5, #4b7cf1);
		border-radius: 50rpx 50rpx 0 0;
		position: relative;
	}
	// 倒三角
	.info-box:after {
		content: '';
		position: absolute;
		right: calc(50% - 30rpx);
		bottom: -28rpx;
		width: 0;
		height: 0;
		border-left: 30rpx solid transparent;
		border-right: 30rpx solid transparent;
		border-bottom: 30rpx solid #4b7cf1;
		transform: rotate(180deg);
		z-index: 2;
	}
	.header-msg-top {
		line-height: 1;
		font-weight: 400;
		font-size: 4vw;
		margin-top: 2.4vw;
		color: #fff;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
	.my_score{
		position: absolute;
		line-height: 20px;
		height: 24px;
		left: 170px;
		margin-top: 2.4vw;
		padding: 2px 6px;
		background-color: #fff;
		color:#fea829;
		border-radius: 10px;
		font-size: 2.8vw;
	}
	.my_realname{
		position: absolute;
		line-height: 20px;
		height: 24px;
		margin-top: 2.4vw;
		padding: 2px 6px;
		color:#fff;		
		border-radius: 10px;
		font-size: 2.8vw;
	}	
	
	.my_group{
		margin-top: 40rpx;
		height: 28vw;
		position: relative;
		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 5rpx;
			padding-top: 20rpx;
			.title-text {
				font-size: 20px;
				font-weight: bold;
				color: #21274b;
			}
			
			.btn {
				width: 40rpx;
				height: 40rpx;
				background: #8bb4ff;
				border-radius: 50%;
				display: flex;
				align-items: center;
				text-align: center;
				justify-content: center;
			}
		}
		.info-text {
			font-size: 24rpx;
			color: #7f7f7f;
			margin-top: 10rpx;
		}
		.btn2 {
			margin-top: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 50rpx;
			width: 140rpx;
			background: #eaf0fd;
			border-radius: 30rpx;
			font-size: 24rpx;
			text-align: center;
			color: #4188ff;
			border: 2rpx solid #cce1ff;
		}
		image{
			width: 100%;
			height: 100%;
			position: absolute;
			inset: 0;
		}
	}
</style>
<!-- uni-grid -->
<style lang="scss" scoped>
	.image {
		width: 25px;
		height: 25px;
	}

	.text {
		margin-top: 10upx;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		// display: block;
		/* #endif */
	}

	.grid-dynamic-box {
		margin-bottom: 15px;
	}
	
	.wallet_top{
		line-height: 36px;
		padding-bottom: 10px;
		// border-bottom: 1px solid #DDD;
	}
	.wallet_top{
		.my_wal_tit{
			display: inline;
			font-size: 24rpx;
			font-weight: 600;
			padding: 15rpx 30rpx;
			color: #4188ff;
			background:#eaf0fd;
			border-radius: 30rpx;
			border: 1px solid #cce1ff;
		}
	}
	.my_wal_in{
		font-size: 12px;
		padding: 8px 0;
		position: absolute;
		right: 30px;
		top: 0;
	}
	
	.cuIcon-right{
		position: absolute;
		right: 10px;
		top: 8px;
	}

	.grid-item-box {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.uni-grid-item {
		// height: ;
	}
	
	.uses_func{
		margin-top: 30upx;
		margin-left: 2%;
		width: 96%;
		padding: 0 0 10px 0;
		background-color: #FFF;
		border-radius: 6px;
	}
	.func_tit{
		width: 100%;
		padding-left: 10px;
		padding-top: 6px;
		line-height: 40px;
		border-bottom: 1px solid #EEE;
		font-size: 14px;
		font-weight: 600;
	}
	.func_item{
		line-height: 44px;
		height: 44px;
		border-bottom: 1px solid #EEE;
		position: relative;
	}
	.func_icon{
		width: 20px;
		height: 20px;
		margin: 12px;
		float:left;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;

	}

	.uni-grid {
		display: flex;
		justify-content: center;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}

	.swiper {
		height: 420px;
	}
.body_top_right{
	    padding-right: 5px;
	    position: absolute;
	    top: 7vh;
	    right: 3vw;
	    display: flex;
	    align-items: center;
			z-index: 999;
		
}
	/* #ifdef H5 */
	@media screen and (min-width: 768px) and (max-width: 1425px) {
		.swiper {
			height: 630px;
		}
	}

	@media screen and (min-width: 1425px) {
		.swiper {
			height: 830px;
		}
	}

	/* #endif */
</style>